<style>
    .flex-and-wrap {
        display: -ms-inline-flexbox;
        display: inline-flex;
        width: 100%;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .lay-flow-box{
        height: 100%;
        overflow: auto;
    }
    .lay-flow-box .flow-title{
        height: 60px;
        line-height: 60px;
        font-size: 16px;
        color: #000;
        font-weight: 600;
        padding: 0 20px;
        border-bottom: 1px solid #F0F1F3;
    }
    .lay-flow-list{
        padding: 10px 12px 0;
    }
    .lay-flow-list .list-cell{
        width: 20%;
    }
    .lay-flow-list .list-cell .list-item{
        padding: 8px;
    }
    .lay-flow-list .list-bg{
        height: 380px;
        padding: 0 20px;
        position: relative;
        background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 0%, #F7FEFB 100%);
        border: 1px solid #F0F1F3;
    }
    .lay-flow-list .list-bg::before{
        content: " ";
        display: inline-block;
        position: absolute;
        width: 100%;
        height: 6px;
        left: 0;
        top: 0;
        background-color: #009C5E;
    }
    .lay-flow-list .list-item h3{
        font-size: 30px;
        color: #B4DDCD;
        font-weight: 600;
        padding-top: 20px;
    }
    .lay-flow-list .list-item h5{
        font-size: 16px;
        padding-bottom: 10px;
    }
    .lay-flow-list .list-item p{
        display: block;
        height: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        /*! autoprefixer: ignore next */
        -webkit-box-orient: vertical;
    }
    .lay-flow-list .nape-cell a{
        display: flex;
        padding: 10px 0;
    }
    .lay-flow-list .nape-cell span{
        flex: 1;
    }
    .lay-flow-list .nape-cell em{
        font-style: normal;
        color: #009C5E;
    }
    .lay-flow-list .nape-cell b{
        padding-left: 5px;
        font-weight: 500;
    }
    .lay-flow-list .nape-cell a .layui-icon{
        margin-top: 2px;
    }
</style>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="lay-flow-box">
            <div class="flow-title">通用流程指引</div>
            <div class="lay-flow-list">
                <div class="list-box flex-and-wrap">
                    <div class="list-cell">
                        <div class="list-item">
                            <div class="list-bg">
                                <h3>第一步</h3>
                                <h5>组织架构与权限</h5>
                                <p>企业先设置组织架构与权限的《部门架构列表》《岗位角色管理》《用户管理》的基础信息</p>
                                <div class="nape-box authority">
                                    <div class="nape-cell">
                                        <a href="#/user/department"><span><em>1.1</em><b>部门架构列表</b></span><i class="layui-icon layui-icon-right"></i></a>
                                    </div>
                                    <div class="nape-cell">
                                        <a href="#/user/role"><span><em>1.2</em><b>岗位角色管理</b></span><i class="layui-icon layui-icon-right"></i></a>
                                    </div>
                                    <div class="nape-cell">
                                        <a href="#/user/user"><span><em>1.3</em><b>用户管理</b></span><i class="layui-icon layui-icon-right"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="list-cell">
                        <div class="list-item">
                            <div class="list-bg">
                                <h3>第二步</h3>
                                <h5>物料信息设置</h5>
                                <p>设置完企业架构信息之后就需要设置产物料信息设置的《品牌管理》《物料单位》《物料分类》《物料类型》</p>
                                <div class="nape-box material-setting">
                                    <div class="nape-cell">
                                        <a href="#/product/productBrand"><span><em>2.1</em><b>品牌管理</b></span><i class="layui-icon layui-icon-right"></i></a>
                                    </div>
                                    <div class="nape-cell">
                                        <a href="#/product/productType"><span><em>2.2</em><b>物料类型</b></span><i class="layui-icon layui-icon-right"></i></a>
                                    </div>
                                    <div class="nape-cell">
                                        <a href="#/product/productCategory"><span><em>2.3</em><b>物料分类</b></span><i class="layui-icon layui-icon-right"></i></a>
                                    </div>
                                    <div class="nape-cell">
                                        <a href="#/product/productType"><span><em>2.4</em><b>物料单位</b></span><i class="layui-icon layui-icon-right"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="list-cell">
                        <div class="list-item">
                            <div class="list-bg">
                                <h3>第三步</h3>
                                <h5>机台设备设置</h5>
                                <p>设置完物料信息之后就需要设置机台设别设置的《设备类型》《设备型号》《设备分类》《设备品牌》得基础信息</p>
                                <div class="nape-box material-setting">
                                    <div class="nape-cell">
                                        <a href="#/device/deviceType"><span><em>3.1</em><b>设备类型</b></span><i class="layui-icon layui-icon-right"></i></a>
                                    </div>
                                    <div class="nape-cell">
                                        <a href="#/device/deviceModel"><span><em>3.2</em><b>设备型号</b></span><i class="layui-icon layui-icon-right"></i></a>
                                    </div>
                                    <div class="nape-cell">
                                        <a href="#/device/deviceCategory"><span><em>3.3</em><b>设备分类</b></span><i class="layui-icon layui-icon-right"></i></a>
                                    </div>
                                    <div class="nape-cell">
                                        <a href="#/device/deviceBrand"><span><em>3.4</em><b>设备品牌</b></span><i class="layui-icon layui-icon-right"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="list-cell">
                        <div class="list-item">
                            <div class="list-bg">
                                <h3>第四步</h3>
                                <h5>智能柜设置</h5>
                                <p>设置完所有基础信息之后就要设备智能柜得基础设置和它得工序设置</p>
                                <div class="nape-box">
                                    <div class="nape-cell authority">
                                        <a href="#/system/systemRuleInfo"><span><em>4.1</em><b>智能柜基础设置</b></span><i class="layui-icon layui-icon-right"></i></a>
                                    </div>
                                    <div class="nape-cell">
                                        <a href="#/product/processInfo"><span><em>4.2</em><b>工序设置</b></span><i class="layui-icon layui-icon-right"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="list-cell">
                        <div class="list-item">
                            <div class="list-bg">
                                <h3>第五步</h3>
                                <h5>物料库存管理</h5>
                                <p>设置完所有基础信息之后就可以导入物料信息，然后再做柜子的上下货流程</p>
                                <div class="nape-box">
                                    <div class="nape-cell">
                                        <a href="#/productCab/mostUsedKnifeList"><span><em>4.1</em><b>物料库列表</b></span><i class="layui-icon layui-icon-right"></i></a>
                                    </div>
<!--                                    <div class="nape-cell">-->
<!--                                        <a href="#/productCab/safetyInventory"><span><em>4.2</em><b>采购预警信息</b></span><i class="layui-icon layui-icon-right"></i></a>-->
<!--                                    </div>-->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'admin' , 'config'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var config = layui.config;
        var admin = layui.admin;

        // 系统管理
        $(".authority").click(function () {
            topNavStatus(0)
        });
        // 生产管理
        $(".material-setting").click(function () {
            topNavStatus(2)
        });
        // 顶部状态设置
        function topNavStatus(type) {
            config.putTempData('menuIndex', type);
            $(".layui-layout-left.menu").find('li').removeClass('nav-active').eq(type).addClass('nav-active');
        }
    });
</script>